[Security Solution][Case] Add `in-progress` status to case #84321

cnasikas · 2020-11-25T11:52:35Z

Summary

This PR adds the in-progress status to cases and changes the UI to accommodate the new change. Specifically:

Case single page view

The Close case/Open case button has been removed from the action bar.
The case status label on the action bar has changed to a dropdown menu. The user can change the status from the dropdown menu.

Before:

After:

The user actions show status changes

When the status of the case is open the bottom button changes to Mark in progress.

Demo

All cases view

The in-progress stat has been added.

The Open/Close filter button has been changed to a dropdown menu.

Demo

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

For maintainers

This was checked for breaking API changes and was labeled appropriately

x-pack/plugins/security_solution/public/cases/components/all_cases/columns.tsx

x-pack/plugins/security_solution/public/cases/components/all_cases/status_filter.tsx

x-pack/plugins/security_solution/public/cases/components/case_action_bar/index.tsx

x-pack/plugins/security_solution/public/cases/components/status/button.tsx

patrykkopycinski · 2020-11-26T10:24:16Z

x-pack/plugins/security_solution/public/cases/components/user_action_tree/helpers.tsx


 interface LabelTitle {
  action: CaseUserActions;
  field: string;
 }

+const getStatusTitle = (status: CaseStatus) => {


maybe we could make a component from that function?

Because If I create a component from that I should do it for every title I think is best to do it as a tech dept on another PR.

x-pack/plugins/security_solution/public/cases/containers/mock.ts

x-pack/plugins/case/common/api/cases/case.ts

cnasikas · 2020-12-03T09:11:16Z

@elasticmachine merge upstream

x-pack/plugins/case/common/api/cases/case.ts

x-pack/plugins/security_solution/public/cases/components/status/config.ts

x-pack/plugins/security_solution/public/cases/containers/mock.ts

x-pack/plugins/case/common/api/cases/case.ts

x-pack/plugins/security_solution/public/cases/components/all_cases/index.tsx

x-pack/plugins/security_solution/public/cases/components/all_cases/table_filters.tsx

stephmilovic · 2020-12-04T01:25:36Z

...ck/plugins/security_solution/public/cases/components/case_action_bar/status_context_menu.tsx

+    <EuiContextMenuItem
+      key={status}
+      icon={status === currentStatus ? 'check' : 'empty'}
+      onClick={onContextMenuItemClick(status)}


Suggested change

onClick={onContextMenuItemClick(status)}

onClick={() => onContextMenuItemClick(status)}

need to make this an anon/lambda function or onContextMenuItemClick will get invoked on render for each menu item

onContextMenuItemClick function returns another function that is memoized along with the status. This is a trick to avoid the callback and potential rerenders.

awesome!! bookmarking this for the future ;)

stephmilovic · 2020-12-04T15:42:49Z

x-pack/plugins/security_solution/public/cases/components/status/button.tsx

+  const [nextStatusIndex, setNextStatusIndex] = useState(getNextItem(indexOfCurrentStatus));
+
+  // The useEffect is needed to update status updates from the context menu.
+  useEffect(() => setNextStatusIndex(getNextItem(indexOfCurrentStatus)), [indexOfCurrentStatus]);


Suggested change

const [nextStatusIndex, setNextStatusIndex] = useState(getNextItem(indexOfCurrentStatus));

// The useEffect is needed to update status updates from the context menu.

useEffect(() => setNextStatusIndex(getNextItem(indexOfCurrentStatus)), [indexOfCurrentStatus]);

const nextStatusIndex = useMemo(() => getNextItem(indexOfCurrentStatus), [indexOfCurrentStatus]);

This should work, right?

or not because of your onClick?

or does onStatusChanged change the indexOfCurrentStatus which would update the useMemo??

The onClick needs the state. onStatusChanged does not change the indexOfCurrentStatus.

I was wrong. It can be done as you said!

stephmilovic · 2020-12-04T17:23:54Z

x-pack/plugins/security_solution/public/cases/components/status/button.tsx

-
-  // The useEffect is needed to update status updates from the context menu.
-  useEffect(() => setNextStatusIndex(getNextItem(indexOfCurrentStatus)), [indexOfCurrentStatus]);
+  const nextStatusIndex = useMemo(() => getNextItem(indexOfCurrentStatus), [indexOfCurrentStatus]);


stephmilovic

Yes! LGTM. Thanks for making those changes. I've had it on my to do list to strictly type status since the start. Great work @cnasikas 🚀 🎸

kibanamachine · 2020-12-04T19:07:02Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 9db8736

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`securitySolution`	2097	2105	+8

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`securitySolution`	8.0MB	8.0MB	+11.3KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`securitySolution`	209.3KB	210.5KB	+1.2KB

History

💔 Build #92013 failed 9c89f76
💚 Build #91648 succeeded 30f1f3938e18670e59c11ad0592d2f9106a4ad17
💚 Build #91341 succeeded f60c1d75eb58eef2ad1046e5b9cdb2a387feab2d
💔 Build #91229 failed 65f591d33be4cc5e4991d31abd6c69bdb6aae946
💔 Build #90292 failed 309bada67954df4361492d229fb3ec54fb798ee3

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

…4321)

) (#85062)

cnasikas self-assigned this Nov 25, 2020

cnasikas added release_note:skip Skip the PR/issue when compiling release notes Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:Threat Hunting Security Solution Threat Hunting Team v7.11.0 v8.0.0 Feature:Cases Cases feature labels Nov 25, 2020

cnasikas marked this pull request as ready for review November 26, 2020 09:30

cnasikas requested review from a team as code owners November 26, 2020 09:30

patrykkopycinski reviewed Nov 26, 2020

View reviewed changes

x-pack/plugins/security_solution/public/cases/components/all_cases/columns.tsx Outdated Show resolved Hide resolved

patrykkopycinski reviewed Nov 26, 2020

View reviewed changes

x-pack/plugins/security_solution/public/cases/components/all_cases/status_filter.tsx Outdated Show resolved Hide resolved

patrykkopycinski reviewed Nov 26, 2020

View reviewed changes

x-pack/plugins/security_solution/public/cases/components/all_cases/status_filter.tsx Outdated Show resolved Hide resolved

patrykkopycinski reviewed Nov 26, 2020

View reviewed changes

x-pack/plugins/security_solution/public/cases/components/case_action_bar/index.tsx Show resolved Hide resolved

patrykkopycinski reviewed Nov 26, 2020

View reviewed changes

x-pack/plugins/security_solution/public/cases/components/status/button.tsx Show resolved Hide resolved

patrykkopycinski reviewed Nov 26, 2020

View reviewed changes

x-pack/plugins/security_solution/public/cases/containers/mock.ts Outdated Show resolved Hide resolved

patrykkopycinski reviewed Nov 26, 2020

View reviewed changes

x-pack/plugins/case/common/api/cases/case.ts Show resolved Hide resolved

cnasikas force-pushed the cases_change_status branch from 309bada to 65f591d Compare December 1, 2020 21:49

stephmilovic reviewed Dec 4, 2020

View reviewed changes

x-pack/plugins/case/common/api/cases/case.ts Outdated Show resolved Hide resolved

stephmilovic reviewed Dec 4, 2020

View reviewed changes

x-pack/plugins/security_solution/public/cases/components/status/config.ts Outdated Show resolved Hide resolved

stephmilovic reviewed Dec 4, 2020

View reviewed changes

x-pack/plugins/security_solution/public/cases/containers/mock.ts Outdated Show resolved Hide resolved

stephmilovic reviewed Dec 4, 2020

View reviewed changes

x-pack/plugins/case/common/api/cases/case.ts Outdated Show resolved Hide resolved

stephmilovic reviewed Dec 4, 2020

View reviewed changes

x-pack/plugins/security_solution/public/cases/components/all_cases/index.tsx Outdated Show resolved Hide resolved

stephmilovic reviewed Dec 4, 2020

View reviewed changes

x-pack/plugins/security_solution/public/cases/components/all_cases/table_filters.tsx Outdated Show resolved Hide resolved

stephmilovic reviewed Dec 4, 2020

View reviewed changes

cnasikas added 3 commits December 4, 2020 17:24

Add in progress literal to status

627b1b5

Create status component

fd825b9

Rename CaseStatus component

047aa37

cnasikas added 13 commits December 4, 2020 17:24

Remove open/close button

fd00b87

Create context status menu

aad65cf

Create status action button

b36d916

Show status on user actions

fe2d636

Add in progress stat

94e623a

Filter in progress cases on all cases page

8566859

Use CaseStatuses enum

e59b983

Fix types

ac7e1cc

Fix unit tests

9da6ffb

Fix i18n

d8a642a

Fix integration tests

bc00f47

Fix cypress tests

a4d910e

Use CaseStatuses

9c89f76

cnasikas force-pushed the cases_change_status branch from 30f1f39 to 9c89f76 Compare December 4, 2020 15:34

stephmilovic reviewed Dec 4, 2020

View reviewed changes

Improve status button

9db8736

cnasikas force-pushed the cases_change_status branch from f754a6f to 9db8736 Compare December 4, 2020 17:20

stephmilovic reviewed Dec 4, 2020

View reviewed changes

stephmilovic approved these changes Dec 4, 2020

View reviewed changes

cnasikas merged commit fcccb01 into elastic:master Dec 4, 2020

cnasikas deleted the cases_change_status branch December 4, 2020 19:36

cnasikas mentioned this pull request Dec 4, 2020

[7.x] [Security Solution][Case] Add in-progress status to case (#84321) #85062

Merged

cnasikas added a commit to cnasikas/kibana that referenced this pull request Dec 4, 2020

[Security Solution][Case] Add in-progress status to case (elastic#8…

65c2e14

…4321)

cnasikas added a commit that referenced this pull request Dec 4, 2020

[7.x] [Security Solution][Case] Add in-progress status to case (#84321

1e46301

) (#85062)

jmikell821 mentioned this pull request Jan 11, 2021

[DOCS] List of API changes for 7.11 elastic/security-docs#440

Closed

cnasikas mentioned this pull request Feb 15, 2021

[Security Solution][Case] Add the ability to mark cases in progress in cases table. #89341

Merged

9 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Security Solution][Case] Add `in-progress` status to case #84321

[Security Solution][Case] Add `in-progress` status to case #84321

cnasikas commented Nov 25, 2020 •

edited

Loading

patrykkopycinski Nov 26, 2020

cnasikas Dec 4, 2020

cnasikas commented Dec 3, 2020

stephmilovic Dec 4, 2020

cnasikas Dec 4, 2020 •

edited

Loading

stephmilovic Dec 4, 2020

stephmilovic Dec 4, 2020

stephmilovic Dec 4, 2020

stephmilovic Dec 4, 2020

cnasikas Dec 4, 2020

cnasikas Dec 4, 2020

stephmilovic Dec 4, 2020

stephmilovic left a comment

kibanamachine commented Dec 4, 2020

	onClick={onContextMenuItemClick(status)}
	onClick={() => onContextMenuItemClick(status)}

[Security Solution][Case] Add in-progress status to case #84321

[Security Solution][Case] Add in-progress status to case #84321

Conversation

cnasikas commented Nov 25, 2020 • edited Loading

Summary

Case single page view

All cases view

Checklist

For maintainers

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cnasikas commented Dec 3, 2020

Choose a reason for hiding this comment

cnasikas Dec 4, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stephmilovic left a comment

Choose a reason for hiding this comment

kibanamachine commented Dec 4, 2020

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

History

[Security Solution][Case] Add `in-progress` status to case #84321

[Security Solution][Case] Add `in-progress` status to case #84321

cnasikas commented Nov 25, 2020 •

edited

Loading

cnasikas Dec 4, 2020 •

edited

Loading